<script setup lang="ts">
import type { PaymentItemRespVO } from '@/api/payment-item';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { PaymentItemApi } from '@/api/payment-item';
import AuthBar from '@/components/authBar/index.vue';
import Empty from '@/components/empty/index.vue';
import { useRequest } from '@/hooks/useRequest';
import { useUserStore } from '@/store/userStore';
import { buildAssetSource } from '@/utils';
import { isEmpty } from '@/utils/is.utils';
import { withQueryString } from '@/utils/router.utils';

const columns = ref(['全部', '检查科', '门诊科']);
const value = ref('全部');

function handleConfirm({ value }) {
  value.value = value;
}

const { userInfo } = storeToRefs(useUserStore());

const {
  data: payList,
  runAsync: getPaymentItemList
} = useRequest(() => PaymentItemApi.getPaymentItemList({
  patientId: userInfo.value.patientId
}));

function handleGoPay(item: PaymentItemRespVO) {
  uni.navigateTo({
    url: withQueryString('/pages/selfPay/payConfirm', {
      itemId: item.id,
      totalAmount: item.amount
    })
  });
}

function handleSearch() {
  getPaymentItemList();
}
</script>

<template>
  <view class="self-pay flex-col">
    <AuthBar back-home />

    <view class="search flex-center items-start">
      <view class="w-750 flex">
        <view class="relative mr-12 w-128">
          <wd-picker v-model="value" :columns="columns" title="选择搜索类型" use-default-slot @confirm="handleConfirm">
            <wd-input :placeholder="value" readonly />
          </wd-picker>

          <view class="select-arrow">
            <wd-icon name="arrow-down" size="22px" color="var(--primary)" />
          </view>
        </view>

        <view class="relative mr-36 flex-1 self-start">
          <wd-input placeholder="请输入汉字/拼音首字母进行项目模糊搜索" />
          <view class="search-btn">
            <wd-button @click="handleSearch">
              搜索
            </wd-button>
          </view>
        </view>
      </view>
    </view>

    <view class="h-0 flex-col flex-1">
      <view class="pay-section__title mb-13 mt-24 flex items-center px-52">
        <image :src="buildAssetSource('pay-item.png')" class="h-76 w-76" />
        缴费项目
      </view>

      <view class="pay-list flex-1 overflow-auto">
        <view class="px-52">
          <view v-for="item in payList" :key="item.id" class="pay-item p-40" @click="handleGoPay(item)">
            <view class="pay-item__cell">
              <view class="pay-item__cell-title">
                {{ item.itemName }}
              </view>
              <view class="pay-item__cell-price">
                <view class="font-bold">
                  ¥{{ item.amount }}
                </view>
              </view>
            </view>
            <view class="mb-30 mt-52 flex items-center justify-between">
              <view class="flex items-center">
                <i class="iconfont icon-addbox" />
                {{ item.departmentName }}
              </view>
              <view class="flex items-center">
                <i class="iconfont icon-calendar-2-fill" />{{ item.date }}
              </view>
            </view>
            <view class="flex items-center justify-between">
              <view class="flex items-center">
                <i class="iconfont icon-zhangdan" />账单号:{{ item.billNo }}
              </view>
              <view class="pay-arrow">
                <i class="iconfont icon-lujing" />
              </view>
            </view>
          </view>
          <Empty v-if="isEmpty(payList)">
            <template #empty-text>
              暂无数据
            </template>
          </Empty>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '自助缴费',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.self-pay {
  background-color: var(--bg-color);
  height: 100%;

  .search {
    background: #d9e9ff;
    padding: 38px 48px;
    --wot-input-inner-height: 68px;
    --wot-input-fs: 20px;
    --wot-input-placeholder-color: #767676;
    :deep(.wd-input) {
      border-radius: 8px;
      background: #eff5ff;
      border: 1px solid #ffffff;
      box-sizing: border-box;
      padding-left: 20px;

      &:after {
        background: transparent;
      }
    }

    .search-btn {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      :deep(.wd-button) {
        width: 98px;
        height: 100%;
        background: var(--primary);
        color: #fff;
        border-radius: 0px 6px 6px 0px;
        font-size: 26px;
      }
    }

    .select-arrow {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .pay-section__title {
    color: var(--primary);
    font-size: 36px;
    font-weight: 500;
  }

  .pay-list {
    .pay-item {
      border-radius: 20px;
      background: #ffffff;
      margin-bottom: 20px;
      box-sizing: border-box;
      border: 2px solid transparent;
      font-size: 34px;
      color: #3d3d3d;

      .iconfont {
        color: #4a73b3;
        margin-right: 8px;
        &.icon-zhangdan {
          font-size: 30px;
        }
        &.icon-lujing {
          font-size: 34px;
        }
        &.icon-addbox {
          font-size: 34px;
        }
        &.icon-calendar-2-fill {
          font-size: 34px;
        }
      }

      .pay-item__cell {
        @apply flex-center justify-between;
        color: var(--text-color);
        .pay-item__cell-title {
          font-size: 48px;
          font-weight: bold;
        }

        .pay-item__cell-price {
          font-size: 46px;
          font-weight: 500;
        }
      }

      .pay-arrow {
        color: var(--primary);
      }

      &:hover,
      &:active {
        background-color: var(--primary);
        color: #fff;
        border-color: #fff;

        .pay-section__title {
          color: #fff;
        }
        .pay-item__cell {
          color: #fff;
        }
        .pay-arrow {
          color: #fff;
        }
        .iconfont {
          color: #fff;
        }
      }
    }
  }
}
</style>
